<!DOCTYPE html>
<html lang='zh_CN'>
<head>
  <meta charset="UTF-8">
  <title>ElementUI And Vue-3</title>
  <script src="https://cdn.staticfile.org/vue/3.2.9/vue.global.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/4.2.0/vue-router.global.prod.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
  <link href="./css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id='app'>
    <h1>{{pagetitle}}</h1>
    <nav>
      <!--使用 router-link 组件进行导航 -->
      <!--通过传递 `to` 来指定链接 -->
      <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link to="/">Home</router-link>
      <router-link to="/about" exact-active-class="_active">About</router-link>
      <router-link :to="{ path: 'register', query: { uid: '1' ,gid:'2','pid':4}}">Register</router-link>
    </nav>
    <router-view></router-view>
    <div class="main">
        <div v-if='canyousee'>yes</div>
        <button @click='toggleCanyousee'>toggle</button>
    </div>  
    <ul>
      <li v-for="(user , index) in users"> 
        <a href='/vue/index.html?u=1'>{{index+1}}: name={{ user.name }} phone={{user.phone}}</a>
      </li>
    </ul>
    <div>
      <div v-if="typeabc === 'A'"> A </div>
      <div v-else-if="typeabc === 'B'"> B </div>
      <div v-else-if="typeabc === 'C'"> C </div>
      <div v-else>  Not A/B/C </div>
      <button @click='randAbc'>randAbc{{cmp1}}</button>
    </div>
    千米 : <input type = "text" v-model = "kilometers"  @focus="currentlyActiveField = 'kilometers'">
    米 : <input type = "text" v-model = "meters" @focus="currentlyActiveField = 'meters'">
    <component-a title='按钮一'></component-a>
    <component-a title='按钮二'></component-a>
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
    <form :id="formid">
      <select name='myselect' v-model='selectedcountries' multiple>
        <option v-for="c in countries" :value="c.code">{{c.name}}</option>
      </select>
      <span>{{selectedcountries}}</span>
      <div>
        <textarea v-model="textarea" :class='txtare'></textarea>
      </div>
    </form>
  </div>
<script type="text/javascript">
  const { createApp, ref } = Vue;
  const { log} = console;
  let ComponentA = {
    props: ['title'],
    template: '<button>{{title}}</button>'
  };
  let MyComponent = {
    data() {
      return {
        count: 0
      }
    },
    template: `
      <button @click="count++">
        点了 {{ count }} 次！
      </button>`
  };
  const Home = { template: '<div>Home</div>' ,component:[
    ComponentA
  ]}
  const About = { template: '<div>About</div>' ,component:[
    MyComponent
  ]}
   
  // 2. 定义一些路由
  // 每个路由都需要映射到一个组件。
  // 我们后面再讨论嵌套路由。
  const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
   
  // 3. 创建路由实例并传递 `routes` 配置
  // 你可以在这里输入更多的配置，但我们在这里
  // 暂时保持简单
  const router = VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
  })
   
  const myMixin = {
    created(){
      console.log('app created in mixins!')
    }
    ,mounted(){
      console.log('app mounted in mixins!');
      axios.get('/vue/mock/user.php')
            .then(ret => {
              log(ret)
              this.users = ret.data
              this.textarea = JSON.stringify(ret.data)
            })
            .catch(function (error) { // 请求失败处理
              console.log(error);
          });
    }
  };
  let app = createApp({
    mixins: [myMixin],
    components: {
      'component-a': ComponentA,
      'my-component': MyComponent
    },
    created(){
      console.log('app created in callback!')
    },
    mounted(){
      console.log('app mounted in mounted!')
    },
    data() {
      return {
        formid:'mainformid',
        pagetitle: 'Vue3.2',
        canyousee:1,
        selectedcountries:'cn',
        countries:[
          {'name' :'中国' , code:'cn'},
          {'name' :'美国' , code:'us'},
          {'name' :'日本' , code:'jp'},
        ],
        typeabc:'A',
        kilometers:1,
        meters:1,
        txtare:'txtare1',
        textarea:'my name is lili!',
        users:[]
      }
    },
    computed: {
      'cmp1' : function(){
        return this.typeabc + this.typeabc;
      }
    },
    watch: {
      kilometers:function(newValue, oldValue) {
        // 判断是否是当前输入框
        if (this.currentlyActiveField === 'kilometers') {
          this.kilometers = newValue;
          this.meters = newValue * 1000
        }
      },
      meters : function (newValue, oldValue) {
        // 判断是否是当前输入框
        if (this.currentlyActiveField === 'meters') {
          this.kilometers = newValue/ 1000;
          this.meters = newValue;
        }
      }
    },
    methods: {
      toggleCanyousee() {
        this.canyousee = ! this.canyousee
      },
      randAbc(){
        let abc = ['A' , 'B' , 'C' , 'D'] ;
        let idx = Math.round(Math.random()*10000 ) % abc.length
        this.typeabc = abc[idx]
      }
    }
  });
  //整个应用支持路由。
  app.use(router)
  app.mount('#app');
</script>
</body>
</html>